<template>
  <el-dialog v-model="props.dialogVisible" :title="form.id ? '编辑菜单' : '新增菜单'" :width="mobile?'90%':'50%'" draggable
             :before-close="closeDialog">
    <el-form :model="form" label-width="120px" ref="formRef" :rules="rules">
      <el-row>
        <el-col :lg="11">
          <el-form-item label="父级菜单" prop="pid">
            <el-tree-select clearable :props="{ value: 'id', label: 'name' }" style="width:100%;"
                            v-model="form.pid" :data="routerMap" check-strictly :render-after-expand="false"/>
          </el-form-item>
        </el-col>
        <el-col :lg="11">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="form.name" clearable/>
          </el-form-item>
        </el-col>
        <el-col :lg="11">
          <el-form-item label="菜单类型" prop="type">
            <el-select v-model="form.type" style="width: 100%;" @change="form.path = ''" placeholder="请选择" clearable>
              <el-option label="导航菜单" :value="0"/>
              <el-option label="按钮" :value="1"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="11">
          <el-form-item label="绑定页面" prop="path" v-if="form.type === 0">
            <el-cascader style="width: 100%;" v-model="form.path" :options="menuOptions"
                         :props="{ label: 'name', value: 'path', checkStrictly: true }"/>
          </el-form-item>
          <el-form-item label="绑定字段" prop="path" v-if="form.type === 1">
            <el-input v-model="form.path" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleSave" :loading="loading">保存</el-button>
                <el-button @click="closeDialog">
                    关闭
                </el-button>
            </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref, watch} from 'vue'
import {menuTreeData, menuTreeInsert, menuTreeUpdate} from '@/api/menu/index'
import {useDevice} from "@/hooks/web/useDevice";
const {mobile} = useDevice()
import {ElMessage, FormRules} from 'element-plus';
import {asyncRouterMap} from '@/router'
const props = defineProps({
  dialogVisible: {}
})

interface RuleForm {
  name: string
  path: string
  type: string
}

let menuOptions = asyncRouterMap
let loading  = ref(false)
let routerMap = ref([])
const formRef = ref()
const form = reactive({
  id: '',
  name: '',
  icon: '',
  type: 0,
  path: [],
  pid: '',
})

const rules = reactive<FormRules<RuleForm>>({
  name: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
  path: [{required: true, message: '请输入绑定字段', trigger: 'blur'}],
  type: [{required: true, message: '请选择菜单类型', trigger: 'change'}],
})
const emit = defineEmits(['closeDialog', 'saveSuccess'])
const closeDialog = () => {
  formRef.value.resetFields()
  form.id = ''
  console.log(form)
  emit('closeDialog')
}

const getTree = async () => {
  let res = await menuTreeData({})
  console.log('树形数据', res)
  routerMap.value = res.data.list
}


const handleSave = () => {
  if (form.type === 0) {
    if (form.path.length) {
      let pathString = '';
      form.path.forEach((item, index) => {
        if (index) {
          item = '/' + item
        }
        pathString += item
      })
      form.path = pathString
    }
  }


  formRef.value.validate(async valid => {
    if (valid) {
      let res = '';
      loading.value  = true
      if (form.id) {
        res = await menuTreeUpdate(form);
      } else {
        res = await menuTreeInsert(form);
      }
      loading.value  = false
      console.log(res)
      if (res) {
        ElMessage({message: '操作成功', type: 'success'})
        emit('saveSuccess')
        closeDialog()
      }
    } else {
      return false
    }
  })

}

watch(() => props.dialogVisible, (newValue) => {
  if (newValue) {
    getTree()
    console.log(menuOptions)
  }
}, {immediate: true, deep: true})

defineExpose({
  form
})
</script>
